<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'teamInfo' }">我的选报</el-breadcrumb-item>
            <el-breadcrumb-item>选报详情</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">选报详情</h2>

        <div style="margin: 3% 5% 3% 5%;">
            <el-tabs type="border-card">

                <el-tab-pane label="课程设计任务" v-if="taskInfo.className != ''">
                    <h1 style="margin: 2% 2% 2% 2%; border-bottom: 1px solid #e0e0e0;padding-bottom: 10px;">基本信息</h1>
                    <div style="display: flex; justify-content: center;text-align: center; width: 100%;">
                        <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="width: 60%">
                            <el-form-item label="班级" size="large">
                                <el-input v-model="taskInfo.className" readonly="true" />
                            </el-form-item>
                            <el-form-item label="任务数" size="large">
                                <el-input v-model="taskInfo.memberMax" readonly="true" />
                            </el-form-item>
                            <el-form-item label="开始时间" size="large">
                                <el-input v-model="taskInfo.startDate" readonly="true" />
                            </el-form-item>
                            <el-form-item label="结束时间" size="large">
                                <el-input v-model="taskInfo.endDate" readonly="true" />
                            </el-form-item>
                            <el-form-item label="评分标准" size="large">
                                <el-input v-model="taskInfo.scaleRule" readonly="true" type="textarea" />
                            </el-form-item>
                        </el-form>
                    </div>


                    <h1 style="margin: 2% 2% 2% 2%; border-bottom: 1px solid #e0e0e0;padding-bottom: 10px;">任务详情</h1>
                    <div style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;"
                        v-for="(item, index) in taskDetail" :key="index">
                        <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="width: 60%">
                            <el-form-item label="子任务题目" size="large">
                                <el-input v-model="item.taskName" readonly="true" />
                            </el-form-item>
                            <el-form-item label="子任务描述" size="large">
                                <el-input v-model="item.content" readonly="true" type="textarea" :autosize="true" />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="校内/校外实践任务">
                    <div>
                        <!-- 选题详情 -->
                        <div style="margin-top: 1%; margin-left: 5%;" >
                            <el-descriptions title="校内/校外实践选题详情" column="2" size="large">
                                <el-descriptions-item label="题 目：" width="200px">{{ topic.taskName }}</el-descriptions-item>
                                <el-descriptions-item label="实践类型：">{{ topic.courseName }}</el-descriptions-item>
                                <el-descriptions-item label="指导老师：">{{ topic.teacherName }}</el-descriptions-item>
                                <el-descriptions-item label="联系方式：">{{ topic.teacherPhone }}</el-descriptions-item>
                                <el-descriptions-item label="选报时间：">{{ topic.topicDate }}</el-descriptions-item>
                                <el-descriptions-item label=""></el-descriptions-item>

                            </el-descriptions>
                            <el-button plain @click="toPost(topic.publishId, topic.practicalType)">查看任务详情</el-button>

                        </div>

                        <!-- 本小队成员 -->
                        <div style="margin: 3% 5% 3% 5%;">
                            <h1>队伍详情</h1>
                            <el-table :data="memberInfo" height="550" border stripe style="width: 100%; height:200px;">
                                <el-table-column prop="stuId" label="学号" width="180" />
                                <el-table-column prop="stuName" label="姓名" width="180" />
                                <el-table-column prop="stuSex" label="性别" />
                                <el-table-column prop="stuPhone" label="联系方式" />
                                <el-table-column prop="stuCollege" label="学院" />
                            </el-table>
                            <el-button type="primary" style="margin-top: 1%;" @click="createVisible = true"
                                v-if="memberInfo == null">创建小队</el-button>
                            <el-button type="danger" style="margin-top: 1%;" @click="deleteVisible = true"
                                v-if="memberInfo != null">解散小队</el-button>
                        </div>


                    </div>
                </el-tab-pane>

            </el-tabs>
        </div>




        <!-- 创建小队弹窗 -->
        <el-dialog v-model="createVisible" title="提示" width="30%">
            <span>是否确定创建小队</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="createVisible = false">取消</el-button>
                    <el-button type="primary" @click="createTeam">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 解散小队弹窗 -->
        <el-dialog v-model="deleteVisible" title="提示" width="30%">
            <span>是否确定解散小队</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="deleteVisible = false">取消</el-button>
                    <el-button type="danger" @click="deleteTeam">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>




    </div>
</template>
<script setup>
import { ref, onBeforeMount, computed, reactive } from 'vue';
import { ElMessageBox } from 'element-plus';
import requests from '@/api/ajax';
import { useRouter } from 'vue-router'

//带参数跳转
const router_useRouter = useRouter()

function toPost(id, type) {
    router_useRouter.push({
        path: 'teamTaskDetail',
        query: {
            publishId: id,
            practicalType: type,
        }
    })
    // $router.push(`courseTaskDetail/${scope.row.practicalId}`)
}

onBeforeMount(() => {

    const asd = requests({ url: "students/team/myMembers", method: "get", }).then(res => {
        //获取队伍成员信息
        if (res.code === 20041) {
            const abc = res.rdata
            memberInfo.value = abc
        } else if (res.code === 20040) {
            memberInfo.value = null
        }

    })
        .catch(err => {
            console.error(err.data);
            // 请求失败后的操作
        });


    const getTopic = requests({ url: "/students/team/topicPreview", method: "get" }).then(res => {
        if (res.code === 20041) {
            topicInfo.value = res.rdata;
            topic.value.taskName = topicInfo.value[0].taskName;
            topic.value.courseName = topicInfo.value[0].courseName
            topic.value.teacherName = topicInfo.value[0].teacherName
            topic.value.teacherPhone = topicInfo.value[0].teacherPhone
            topic.value.practicalType = topicInfo.value[0].topicType
            topic.value.publishId = topicInfo.value[0].publishId
            topic.value.topicDate = new Intl.DateTimeFormat('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
            }).format(new Date(topicInfo.value[0].topicDate))

        } else {
            topicInfo.value = null
        }

    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });


    const getCourseTask = requests({ url: "/students/CoursePublish", method: "get" }).then(res => {
        if (res.code === 20041) {
            courseTask.value = res.rdata

            const asd = requests({ url: "/inner/taskbaseVo/" + courseTask.value[0].practicalId, method: "get", }).then(resq => {
                //存储用户信息到浏览器toke
                const abc = resq.rdata
                taskDetail.value = abc
            })
                .catch(err => {
                    console.error(err);
                    // 登录请求失败后的操作
                });


        } else {
            courseTask.value = null
        }

    }).catch(err => {
        console.error(err.data);
        // 登录请求失败后的操作
    });

})

//课程设计任务信息
const courseTask = ref([
    // {
    //   "practicalId": 1,
    //   "classId": 2,
    //   "className": "RB软工互192",
    //   "adviserId": 1,
    //   "adviserName": "李春",
    //   "teachId": 2,
    //   "teachName": "徐家豪",
    //   "practicalType": 0,
    //   "onloadDate": "2023-04-19T16:00:00.000+00:00",
    //   "planId": 1,
    //   "courseId": 0,
    //   "courseName": "软工实践一",
    //   "majorName": null,
    //   "enrolDate": null,
    //   "teacherPhone": "13911111111"
    // }
])

//队伍成员信息
const memberInfo = ref([
    /*     {
            memberId: '',
            studentId: '',
            memberState: '',
            stuId: '',
            stuName: "",
            stuSex: "",
            classId: '',
            stuIdentity: "",
            stuCollege: "",
            stuPhone: "",
            attendedDate: "",
            stuPassword: '',
            classMajorName: '',
            className: '',
            classGraduateDate: '',
            teamId: '',
            teamState: '',
            creationDate: ""
        } */
])

//选题信息
const topicInfo = ref({
    topicId: '',
    topicTeamId: '',
    topicType: '',
    topicDate: "",
    publishId: '',
    memberMax: '',
    taskName: "",
    content: "",
    scaleRule: "",
    startDate: "",
    endDate: "",
    planId: '',
    courseId: '',
    courseName: "",
    majorName: "",
    enrolDate: '',
    practicalId: '',
    classId: '',
    className: "",
    adviserId: '',
    adviserName: '',
    teachId: '',
    teachName: '',
    practicalType: '',
    onloadDate: '',
    teacherId: '',
    teacherName: "",
    teacherSex: "",
    teacherIdentity: '',
    teacherPhone: "",
    teacherCollege: '',
    teacherPassword: ''
})

//展示的选题信息
const topic = ref({
    taskName: '',
    topicDate: '',
    courseName: '',
    teacherName: '',
    teacherPhone: '',
})

//弹窗
let deleteVisible = ref(false)
let createVisible = ref(false)

//创建小队
function createTeam() {
    const asd = requests({ url: "/students/team/create", method: "get", }).then(res => {
        if (res.code === 20010) {
            ElMessage.error(res.msg);
        } else if (res.code === 20011) {
            ElMessage.success(res.msg);
            requests({ url: "students/team/myMembers", method: "get", }).then(res => {
                //获取小队信息
                if (res.code === 20041) {
                    memberInfo.value = res.rdata
                } else if (res.code === 20040) {
                    memberInfo.value = null
                }

            })
                .catch(err => {
                    console.error(err);
                    // 请求失败后的操作
                });

        } else {
            ElMessage.error('组队时发生错误');
        }
    })
        .catch(err => {
            console.error(err);
            // 请求失败后的操作
        });
    //关闭对话框
    createVisible.value = false
}

//解散小队
function deleteTeam() {
    const asd = requests({ url: "/students/team/delete", method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        if (res.code === 20020) {
            ElMessage.warning(res.msg);
        } else if (res.code === 20021) {
            ElMessage.success(res.msg);
            requests({ url: "students/team/myMembers", method: "get", }).then(res => {
                //获取小队信息
                if (res.code === 20041) {
                    memberInfo.value = res.rdata
                } else if (res.code === 20040) {
                    memberInfo.value = null
                }

            })
                .catch(err => {
                    console.error(err);
                    // 登录请求失败后的操作
                });

        } else {
            ElMessage.error(res.msg)
        }


    })
        .catch(err => {
            console.error(err);
            // 登录请求失败后的操作
        });

    deleteVisible.value = false
}

const taskInfo = ref({
    className: '',
    memberMax: '',
    scaleRule: "",
    startDate: "",
    endDate: "",
})

const taskDetail = ref([
    {
        taskId: '',
        taskName: "",
        content: "",
        taskType: "",
        publishId: '',
        startDate: "",
        endDate: "",
        scaleRule: "",
        practicalId: '',
        classId: '',
        className: "",
        adviserId: '',
        adviserName: "",
        teachId: '',
        teachName: "",
        practicalType: '',
        onloadDate: ""
    },
])

taskInfo.value.className = computed(() => taskDetail.value[0].className)
taskInfo.value.scaleRule = computed(() => taskDetail.value[0].scaleRule)
taskInfo.value.memberMax = computed(() => taskDetail.value.length)

const startStr = computed(() => taskDetail.value[0].startDate);
taskInfo.value.startDate = computed(() => startStr.value.substring(0, 10));

const endStr = computed(() => taskDetail.value[0].endDate);
taskInfo.value.endDate = computed(() => endStr.value.substring(0, 10));

</script> 